<template>
  <div>
    <router-link to="/" class="header-A" v-show="showA">
      <span class="iconfont header-A-back">&#xe8a4;</span>
    </router-link >
    <div
    class="header-B"
    v-show="!showA"
    :style="opacityStyle">
      <router-link to="/">
      <div class="iconfont header-B-back">&#xe8a4;</div>
      </router-link>
      景点详情
    </div>
  </div>
</template>

<script>
  export default{
    name:'DetailHeader',
    data() {
      return{
        showA:true,
        opacityStyle:{
          opacity: 0
        }
      }
    },
    methods:{
      handleScroll () {
        const top = document.documentElement.scrollTop
        if (top > 60) {
          let opacity =  top/140
          opacity = opacity > 1 ? 1:opacity
          this.opacityStyle = {
            opacity:opacity
          }
          this.showA = false
        } else{
          this.showA = true
        }
      }
    },
    mounted () {
      window.addEventListener('scroll',this.handleScroll)
    },
    beforeDestroy () {
      window.removeEventListener('scroll',this.handleScroll) //解除scroll绑定
    }
  }
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .header-A
    position :absolute
    left :.2rem
    top :.2rem
    width :.8rem
    height :.8rem
    line-height :.8rem
    border-radius :.4rem
    text-align :center
    background :rgba(0,0,0,.8)
    .header-A-back
      color :#FFFFFF
      font-size :.4rem
  .header-B
    position :fixed
    top:0
    left :0
    right :0
    height :$headerHeight
    line-height :$headerHeight
    text-align :center
    color :#FFFFFF
    background : $bgcolor
    font-size : .32rem
    z-index :3
    .header-B-back
      position :absolute
      top :0
      left :0
      width :.64rem
      text-align :center
      font-size :.4rem
      color :#FFFFFF
</style>
